<template>
	<div class="moviegenre2">
		<div class="dd">
			<div class="d1">
				<div class="d2">
					<p class="p1">书籍管理</p>
					—
					<p>书籍类型</p>
				</div>
				<div class="im">
					<el-button icon="el-icon-refresh-right"></el-button>
				</div>
			</div>
			<div class="hr"></div>
			<el-table :data="Alllist" class="d4":border="true">
				<el-table-column prop="id" label="1级类型ID"></el-table-column>
				<el-table-column prop="prio" label="顺序"></el-table-column>
				<el-table-column prop="name" label="1级类型名称"></el-table-column>
				<el-table-column label="二级节点信息" min-width="300">
					<template slot-scope="scope">
						<div class="box" v-for="x in scope.row.children">
							{{x.prio}}
							{{x.name}}
							<el-link type="warning" size="small" icon="el-icon-edit"
								@click="upd(scope.row, x)">编辑</el-link>
							<el-link type="danger" size="small" icon="el-icon-close"
								@click="del()">删除</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="添加子类型" min-width="80">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="add(scope.row)">添加书籍类型</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-dialog title="类型信息" :visible.sync="x">
				<div>
					<h4>父节点ID： {{typeForm.pid}}</h4>
					<h4>父节点名： {{typeForm.pname}}</h4>
				</div>
				<div style="height: 8px; border-top: 1px solid lightgray;"></div>
				<el-form :model="typeForm" :rules="typeRule" label-width="120px" label-position="left">
					<el-form-item label="二级类型名称" prop="name">
						<el-input v-model="typeForm.name" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="显示顺序" prop="prio">
						<el-input v-model="typeForm.prio" autocomplete="off"></el-input>
					</el-form-item>
					<el-button @click="submit('typeRule')">{{title}}</el-button>
				</el-form>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Moviegenre',
		data() {
			return {
				Alllist: [],
				x: false,
				obj: {
					id: 0,
					name: "",
					pid: 0,
					prio: 100
				},
				title: "类型管理",
				typeForm: {
					id: 0,
					name: "",
					pid: 0,
					prio: 100
				},
				typeRule: {
					name: [{
						required: true,
						message: '请输入子类型',
						trigger: 'blur'
					}],
				}
			}
		},
		methods: {
			upd(item, child) {
				this.x = true
				console.log(item)
				this.typeForm.pid = item.id
				this.typeForm.pname = item.name
				this.typeForm.name = child.name
				this.typeForm.prio = child.prio
				this.typeForm.id = child.id
				this.title = "修改"
			},
			del(){
				alert('删除接口未开发......');
			},
			add(obj) {
				this.x = true
				this.typeForm = {
					id: 0,
					name: "",
					pid: obj.id,
					pname: obj.name,
					prio: 100,
				};
				this.title = "添加"
			},
			submit() {
				if (this.typeForm.name.length < 2) {
					this.$message.error("请输入类型名称")
					return;
				}
				this.obj = this.typeForm
				this.x = false
				//默认的提交方式也是通过json
				let _this = this
				console.log("添加类型")
				console.log(this.obj)
				this.$postx("/api/adm/type/add", this.obj).then(function(response) {
					//_this.arr = response.data.data
					_this.change2Tree(response.data.data)
				})
			},
			change2Tree(respData) {
				let a = respData;
				this.arr = [];
				for (let i = 0; i < a.length; i++) {
					if (a[i].pid == 0) {
						console.log(a[i])
						let obj = {
							'id': a[i].id,
							'name': a[i].name,
							'prio': a[i].prio,
							'pid': 0
						} //1级节点
						let childs = [];
						for (let j = 0; j < a.length; j++) { //查找子节点
							console.log(a[i].id)
							if (a[j].pid == a[i].id) {
								childs.push({
									'id': a[j].id,
									'name': a[j].name,
									'prio': a[j].prio,
									'pid': a[i].id
								})
							}
						} //查找子节点结束
						if (childs.length > 0) {
							obj.children = childs;
						}
						this.Alllist.push(obj);
					}
				}
				console.log("整理类型的结构， 形成树的结构")
				console.log(this.arr)
			} //change2Tree
		
		},
		mounted() {
			console.log("Type2 mounted")
			this.$get("/api/adm/type/findAll2")
				.then((resp) => {
					//console.log(this);
					console.log("获取后端类型数据， 不是树的结构，需要前端处理")
					console.log(resp.data.data)
					this.change2Tree(resp.data.data)
				})
		},
	}
</script>

<style scoped>
	.moviegenre2 {
		width: 85%;
	}

	.hr {
		margin-top: 1%;
		border: 1px solid #f4f4f4;
	}

	.dd {
		width: 95%;
		margin-left: 5%;
	}

	.d1 {
		display: flex;
		justify-content: space-between;
		margin-top: 2%;
	}

	.d1 .p1 {
		color: #a7adb2;
	}

	.d1 .im .el-button {
		background-color: #2da99d;
		color: white;
		border-radius: 5px;
	}

	.d2 {
		width: 17%;
		display: flex;
		justify-content: space-between;
	}

	.d3 button {
		margin-top: 1%;
		width: 9%;
		height: 35px;
		background-color: #009688;
		color: white;
		border-radius: 5%;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.d4 {
		margin-top: 2%;

	}

	.d6 {
		width: 20%;
		display: flex;
		margin-top: 1%;
	}

	.d6 .el-button {
		background-color: #009688;
		color: white;
		margin-left: 5%;
	}
</style>